<!--
    用户 前端html骨架:

    前端页面统一使用layui.layer.open的方式进行弹出层的展示，所以这里仅包括html的div片段
    用户 分页展示：

    1. 首先是顶部有一个表单，用来确定查询的条件。这里简化了一下，仅根据需要查询名称和时间
    2. 表单里面有一个点击刷新表格的搜索按钮和一个点击进入添加记录环节的添加按钮
    3. 分页的主体使用layui.table进行展示，除了基础信息之外，添加了修改和删除操作的按钮
 -->

<meta charset="UTF-8">
<!--
      一般的，在使用layui.layer.open方法时会在配置项中指定这个弹出层的id。这里取  user
  弹层dom的id属性值自然就是指定的这个 user 值了。 这个id可以确保弹出层的唯一性。
      这里是将主体内容放在一个div中，这个id属性取的是 User 是上面id的首字母大写。
 -->
<div id="User">
    <!--
        将一个div 或者 form 元素的 class 属性中设置上 layui-form 那么在layui中就会识别成一个表单了。
        建议同时将 lay-filter 属性也设置上(这个类似表单的编号，需要唯一) 以方便后面通过它来调用layui表单的内置方法
    -->
    <div class="layui-form layui-form-pane" lay-filter="User-form" >
        <div class="layui-form-item" style="margin: 0;" lay-filter="User-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户昵称:</label>
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" class="layui-input" name="name"
                        id = "User-name" lay-filter="User-name" placeholder="请输入用户昵称" />
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">时间:</label>
                <div class="layui-input-inline" >
                    <!--
                       - 经常需要将输入框变成可以选择时间输入的时间控件。
                            在layui中经典的做法是记下这个输入框的id，在js里面单独绑定。
                            这里也采用这种方式，给这个输入框设置一个唯一的id属性
                       - 给准备绑定时间控件的输入框 添加上  autocomplete="off" 的属性
                            可以防止在有的浏览器上面的自动填充会阻挡时间控件，导致选不到时间
                       - 给准备绑定时间控件的输入框 添加上  readonly 的属性
                            可以防止有心人直接修改输入框内容而达不到预期的效果
                     -->
                    <input type="text" autocomplete="off" readonly class="layui-input" name="startTime"
                        id = "User-startTime"   lay-filter="User-startTime" placeholder="请选择" />
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" >
                    <input type="text" autocomplete="off" readonly class="layui-input" name="endTime"
                           id = "User-endTime"   lay-filter="User-endTime" placeholder="请选择" />
                </div>
            </div>
            <div class="layui-inline">
                <!--
                    layui.form的提交按钮:
                        就是在按钮上面添加属性 lay-submit 这样点击时就是自动触发表单提交(结合js内容)
                        需要注意的是这个 lay-filter 属性是不可少的
                -->
                <button class="layui-btn" type="button" lay-submit lay-filter="User-submit" >
                    <i class="layui-icon layui-icon-search"></i>查询
                </button>
            </div>
            <div class="layui-inline">
                <!-- 这个添加按钮不需要表单提交，这里直接加个id，单独绑定事件  -->
                <button class="layui-btn" type="button" id = "User-add">
                    <i class="layui-icon layui-icon-add-circle-fine"></i>添加
                </button>
            </div>
            <div class="layui-inline">
                    <!--
                        layui.form的提交按钮(按照条件导出excel):
                            就是在按钮上面添加属性 lay-submit 这样点击时就是自动触发表单提交(结合js内容)
                            需要注意的是这个 lay-filter 属性是不可少的
                    -->
                <button class="layui-btn" type="button" lay-submit lay-filter="User-export" >
                    <i class="layui-icon layui-icon-download-circle"></i>导出
                </button>
            </div>
            <div class="layui-inline">
                    <!-- 这个导入按钮不需要表单提交，这里直接加个id，单独绑定事件  -->
                <button class="layui-btn" type="button" id = "User-import">
                    <i class="layui-icon layui-icon-upload-drag"></i>导入
                </button>
            </div>
        </div>
        <!-- layui.table 有多种渲染方式，这里是将一个空的table元素上面添加 layui-table 的class 然后通过js的方式进行渲染 -->
        <table class="layui-table" id="User-table" lay-filter="User-table" style="margin: 0;"> </table>
    </div>
    <!-- 表格的操作栏，后面是通过id来进行选择的  -->
    <script  type="text/html" id="User-table-toolbar">
        <!-- layui-btn-group 这个样式里面的按钮是以按钮组的形式出现的，比较紧凑  -->
        <div class="layui-btn-group">
            <!-- layui-btn 是layui按钮的样式 layui-btn-sm 是一个中等的按钮  lay-event 是绑定操作栏点击事件(在js里面绑定)   -->
            <a class="layui-btn layui-btn-sm" lay-event="updateRecord">编辑</a>
            <a class="layui-btn layui-btn-sm" lay-event="deleteByPid">删除</a>
        </div>
    </script>
</div>